<template>
  <el-dialog
    title="费用详情"
    width="650px"
    :visible.sync="innerVisible">
    <div v-if="vueIf" v-loading="loading">
      <table class="table show-table table-align-middle">
        <tbody>
        <tr>
          <th width="50">序号</th>
          <th width="200">时间</th>
          <th width="110">类型</th>
          <th width="100">金额</th>
          <th width="190">备注</th>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{index + 1}}</td>
          <td>{{item.foundDate | unixTimestampFilter}}</td>
          <td>{{item.costName}}</td>
          <td>{{item.money | decimalNumFilter}}</td>
          <td>{{item.memo}}</td>
        </tr>
        <tr v-if="tableData.length === 0">
          <td colspan="5" class="imageTableNoData font-grey-silver">无数据</td>
        </tr>
        <tr v-else>
          <td colspan="3" class="imageTableNoData font-grey-silver">合计</td>
          <td>{{totalMoney | decimalNumFilter}}</td>
          <td></td>
        </tr>
        </tbody>
      </table>
    </div>
  </el-dialog>
</template>
<script>
import {unixTimestampFilter, decimalNumFilter} from '@/filters'
export default {
  name: 'modalFeesDetail',
  components: {
  },
  props: {
    orderId: {
      type: String,
      required: true
    }
  },
  filters: {
    unixTimestampFilter,
    decimalNumFilter
  },
  data() {
    return {
      innerVisible: false,
      tableData: [],
      totalMoney: 0, // 收商家金额
      totalOutMoney: 0, // 总支出
      vueIf: false,
      loading1: false,
      loading2: false,
      loading3: false
    }
  },
  computed: {
    loading() {
      return this.loading1 || this.loading2 || this.loading3
    }
  },
  methods: {
    // 收商家 每个money,总金额totalMoney
    getdata() {
      this.loading1 = true
      this.$ajax.get('/ms-fahuobao-order/FhbAdditional/findCostbyId', {orderId: this.orderId}).then(response => {
        if (response) {
          this.tableData = response.data
          this.totalMoney = 0
          if (Array.isArray(this.tableData)) {
            this.totalMoney = this.tableData.reduce((total, item) => { return total + item.money }, 0)
          }
        }
      }).finally(_ => {
        this.loading1 = false
      })
    },
    show() {
      this.vueIf = false
      this.$nextTick(_ => {
        this.vueIf = true
        this.getdata()
        this.innerVisible = true
      })
    },
    hide() {
      this.innerVisible = false
    }
  }
}
</script>
